//心知天气
(function () {
  //   异步加载
  $.ajax({
    type: "get",
    url: "https://api.seniverse.com/v3/weather/now.json?key=SOv9QqGsS5UPhhbYA&location=wuhan",
    async: true,
    success: function (datas) {
      let location = datas.results[0].location;
      let now = datas.results[0].now;
      console.log(location);
      console.log(now);
      let contest = document.querySelector('.weather');
      let windy = "西北风";    //由于用的免费接口没有没有风向所有自己创造一个
      let weatherImg = ['⛅','🌤','🌧','🌁','☁','⚡','🌪','🌫','❄']   //多云、晴天、下雨、雾霾、下雪
      let weather = now.text;
      if(weather == '多云'){
        weather = weatherImg[0];
      }
      if(weather == '晴'){
        weather = weatherImg[1];
      }
      if(weather == '雨' ||weather === '小雨' ||weather === '中雨' ||weather === '大雨'||weather === '暴雨'){
        weather = weatherImg[2];
      }
      if(weather == '霾'){
        weather = weatherImg[3];
      }
      if(weather == '阴'){
        weather = weatherImg[4];
      }
      if(weather == '雷电' ){
        weather = weatherImg[5];
      }
      if(weather == '大风' ){
        weather = weatherImg[6];
      }
       if(weather == '雾' ){
        weather = weatherImg[7];
      }
      if(weather == '雪' ||weather == '小雪' ||weather == '雨夹雪' ||weather == '大雪'){
        weather = weatherImg[8];
      }

      contest.innerHTML = `实时气象 ${location.name}市 ${weather}${now.temperature}° ${windy} 体感温度 ${now.temperature-1}°`;
    },
  });
  //获取元素

})();

// #获取time
(function () {
  let timer = document.querySelectorAll(".timer ");
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDay();

  for (let i = 0; i < timer.length; i++) {
    timer[i].innerHTML = year + "-" + month + "-" + day;
  }
})();

// 数字模块3
(function () {
  // 武汉市道路车辆统计
  let need = document.querySelector(".no-hd").querySelectorAll("li")[0];
  // 拥堵路段车辆统计
  let supply = document.querySelector(".no-hd").querySelectorAll("li")[1];
  function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function needSum() {
    need.innerHTML = parseInt(need.innerHTML) + getRandomInt(1, 10);
    // ***************

    localStorage.setItem("lastname", need.innerHTML);
    // Retrieve
    need.innerHTML = localStorage.getItem("lastname");
    // console.log(need.value);

    // *************
  }
  function supplySum() {
    supply.innerHTML = parseInt(supply.innerHTML) + getRandomInt(1, 10);
  }
  setInterval(needSum, 1500);
  setInterval(supplySum, 2000);
})();

// 图1
(function () {
  // 线图轨迹。 0=》无，1=》外到内，2=》内到外，3 =》 双向
  let myCharts = echarts.init(document.querySelector(".bar .chart "));

  let points = [
    {
      name: "高德地图",
      desc: {
        type: 3,
      },
    },
    {
      name: "腾讯地图",
      desc: {
        type: 2,
      },
    },
    {
      name: "百度地图",
      desc: {
        type: 1,
      },
    },
    {
      name: "谷歌地图",
      desc: {
        type: 3,
      },
    },
    {
      name: "华为地图",
      desc: {
        type: 2,
      },
    },
    {
      name: "蔚蓝地图",
      desc: {
        type: 1,
      },
    },
  ];
  let color = ["#ffffff", "#36fff6", "#ffe93a", "#67f95f"];
  let oneArr = [
    {
      name: "中心点",
      desc: {
        type: 0,
      },
      symbol: "none",
      symbolSize: 233,
    },
  ];
  let erArr = points;
  let allArr = [...oneArr, ...erArr],
    dataArr = [];
  // 点
  allArr.forEach((el, ind) => {
    if (el.desc.type > 0) {
      el.symbolSize = 50;
      el.symbol =
        "path://M544 552.325V800a32 32 0 0 1-32 32 31.375 31.375 0 0 1-32-32V552.325L256 423.037a32 32 0 0 1-11.525-43.512A31.363 31.363 0 0 1 288 368l224 128 222.075-128a31.363 31.363 0 0 1 43.525 11.525 31.988 31.988 0 0 1-11.525 43.513L544 551.038z m0 0,M64 256v512l448 256 448-256V256L512 0z m832 480L512 960 128 736V288L512 64l384 224z m0 0";
      el.itemStyle = {
        color: color[el.desc.type],
      };
    }
    el.label = {
      normal: {
        show: true,
        position: "bottom",
        distance: 10,
        color: color[el.desc.type],
      },
    };
  });

  // 圆形分区
  function CalutePointToSplitCircle(arr, option) {
    const newArray = [];
    const { length: arLen } = arr;
    let single_angle = (360 / arLen).toFixed(2);
    let UtilCalute = {
      calute_x: (ang, radius) => {
        return (Math.cos((ang * Math.PI) / 180).toFixed(2) * radius).toFixed(2);
      },
      calute_y: (ang, radius) => {
        return (Math.sin((ang * Math.PI) / 180).toFixed(2) * radius).toFixed(2);
      },
    };
    // 数据节点
    arr.forEach((e, index) => {
      let itemDesc = e.desc;
      let ang =
        option.stratAngle +
        (itemDesc.angle && typeof itemDesc.angle === "number"
          ? itemDesc.angle
          : single_angle * index);
      // 各节点中心点
      const x = UtilCalute.calute_x(ang, option.raduis);
      const y = UtilCalute.calute_y(ang, option.raduis);
      // 各节点连接到中心的线段的起点  减去节点的半径
      const x1 = UtilCalute.calute_x(ang, option.raduis - option.nodeRadius);
      const y1 = UtilCalute.calute_y(ang, option.raduis - option.nodeRadius);
      // 各节点连接到中心的线段的终点
      const x0 = UtilCalute.calute_x(ang, option.emptyCenterRadius);
      const y0 = UtilCalute.calute_y(ang, option.emptyCenterRadius);

      e.value = [x, y]; // 节点中心点
      e.lineData = [
        [x1, y1],
        [x0, y0],
      ];
      newArray.push(e);
    });
    return newArray;
  }

  // 线配置
  function linesConfig(arr) {
    let dataArr = [];

    function getFormatItem(item, start, end) {
      return [
        { coord: item.lineData[start] }, // 起点
        {
          coord: item.lineData[end],
          lineStyle: {
            color: "#0BC6FE",
            curveness: item.desc.type === 3 ? 0.1 : 0,
          },
          effect: {
            color: color[item.desc.type],
          },
        }, // 终点
      ];
    }

    arr.forEach((el) => {
      switch (el.desc.type) {
        case 0:
          break;
        case 1:
          // 外到内
          dataArr.push(getFormatItem(el, 0, 1));
          break;
        case 2:
          // 内到外
          dataArr.push(getFormatItem(el, 1, 0));
          break;
        case 3:
          // 双向
          dataArr.push(getFormatItem(el, 0, 1));
          dataArr.push(getFormatItem(el, 1, 0));
          break;
      }
    });
    return dataArr;
  }

  // 点分布
  oneArr = CalutePointToSplitCircle(oneArr, {
    stratAngle: 0,
    raduis: 0,
    nodeRadius: 0,
    emptyCenterRadius: 0,
  });
  erArr = CalutePointToSplitCircle(erArr, {
    stratAngle: 0,
    raduis: 40,
    nodeRadius: 5,
    emptyCenterRadius: 10,
  });

  allArr = [...oneArr, ...erArr];
  // 线坐标和配置
  dataArr = linesConfig(allArr);
  // 生成虚线 饼图数据
  function generateData(totalNum, bigvalue, smallvalue, color) {
    let dataArr = [];
    for (let i = 0; i < totalNum; i++) {
      if (i % 2 === 0) {
        dataArr.push({
          name: (i + 1).toString(),
          value: bigvalue,
          itemStyle: {
            normal: {
              color: color,
              borderWidth: 0,
            },
          },
        });
      } else {
        dataArr.push({
          name: (i + 1).toString(),
          value: smallvalue,
          itemStyle: {
            normal: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
            },
          },
        });
      }
    }
    return dataArr;
  }

  let dolitData = generateData(100, 25, 20, "rgb(126,190,255)");
  let threeData = generateData(6, 40, 10, "#2dc0c9");

  function getOption(startAngle, radius) {
    let option = {
      xAxis: {
        show: false,
        type: "value",
        max: 50,
        min: -51,
      },
      grid: {
        top: 0,
        bottom: 10,
        left: 10,
        right: 10,
      },
      yAxis: {
        show: false,
        type: "value",
        max: 50,
        min: -50,
      },
      graphic: {
        elements: [
          {
            type: "text",
            z: 7,
            style: {
              text: "智慧交通",
              textAlign: "center",
              fill: "#fff",
              font: '30px "Microsoft YaHei"',
            },
            left: "center",
            top: "center",
          },
          {
            type: "image",
            z: 4,
            style: {
              image: "./asset/get/s/data-1641374427371-xPKsRNQ2l.png",
              width: 170,
              height: 170,
            },
            left: "center",
            top: "center",
          },
        ],
      },
      series: [
        {
          name: "节点",
          type: "graph",
          silent: false,
          hoverAnimation: false, // 鼠标悬浮高亮
          cursor: "default",
          coordinateSystem: "cartesian2d",
          z: 3,
          lineStyle: {
            width: 2,
            color: "source",
            type: "dashed",
          },
          data: allArr,
        },
        {
          name: "线图",
          type: "lines",
          hoverAnimation: false,
          silent: false,
          cursor: "default",
          coordinateSystem: "cartesian2d",
          polyline: false, // 多线段
          z: 1,
          lineStyle: {
            width: 2,
            type: "dashed",
            curveness: 0,
          },
          effect: {
            show: true,
            period: 8, //箭头指向速度，值越小速度越快
            trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: "arrow", //箭头图标
            symbolSize: 6,
          },
          emphasis: {
            lineStyle: {
              type: "dashed",
            },
          },
          data: dataArr,
        },
        {
          name: "不动外圆",
          type: "pie",
          zlevel: 4,
          silent: true,
          radius: ["60%", "59%"],
          label: {
            normal: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: dolitData,
        },
        {
          type: "pie",
          name: "旋转圆",
          zlevel: 20,
          silent: true,
          radius: ["50%", "49%"],
          hoverAnimation: false,
          startAngle: startAngle,
          data: threeData,
          label: {
            normal: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
        },
        {
          name: "缩放圆",
          type: "pie",
          zlevel: 4,
          silent: true,
          radius: [radius + 1 + "%", radius + "%"],
          label: {
            normal: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: dolitData,
        },
      ],
    };
    return option;
  }

  let startAngle = 50; // 初始旋转角度
  let [minradius, radius, maxradius] = [22, 22, 24]; // 最小、初始、最大 缩放尺寸
  let isBig = true; // 缩放动画 标识

  function draw() {
    startAngle = startAngle - 5;
    if (isBig) {
      radius = radius + 0.5;
      if (radius > maxradius) {
        isBig = false;
      }
    } else {
      radius = radius - 0.5;
      if (radius < minradius) {
        isBig = true;
      }
    }
    let option = getOption(startAngle, radius);
    myCharts.setOption(option, true);
  }

  timer = setInterval(draw, 200);
  window.addEventListener("resize", function () {
    myCharts.resize();
  });
})();
// 图2
(function () {
  let myCharts = echarts.init(document.querySelector(".line .chart"));
  let option = {
    color: ["#0FD64F", "#F7B708", "#ED5D5D", "#33e1ca"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "25",
      left: 90,
      right: 112,
      bottom: "-10",
      containLabel: false,
    },
    legend: {
      // orient：“horizontal”,//水平展示，不写默认水平展示
      orient: "horizontal",
      right: 100,
      top: 0,
      textStyle: {
        color: "#4c9bfd", // 图例文字颜色
      },
    },
    xAxis: [
      {
        type: "value",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        inverse: true, //是否是反向坐标轴
        axisTick: "none",
        axisLine: "none",
        axisLabel: {
          color: "#FFF",
          fontSize: "16",
          formatter: function (value) {
            const maxlength = 7;
            if (value.length > maxlength) {
              return value.substring(0, maxlength - 1) + "...";
            } else {
              return value;
            }
          },
        },
        data: [
          "螃蟹岬",
          "街道口",
          "江汉路",
          "楚河汉街",
          "武汉天地",
          "黄陂广场站",
          "百泰路站",
          "横店站",
          "临空北路",
          "天阳大道站",
          "腾龙大道站",
          "汤云海站",
          "马池站",
          "徐家棚站",
          "竹叶山站",
          "洪山站",
          "新路村站",
          "军运村站",
          "珞雄路站",
          "光谷站",
          "青龙山地铁小镇站",
          "板桥村站",
        ],
      },
      {
        type: "category",
        inverse: true,
        // inside: true,
        axisTick: "none",
        axisLine: "none",
        data: [
          2560, 1260, 1241, 808, 687, 987, 1575, 779, 654, 158, 841, 615, 789,
          1236, 3651, 251, 71, 2885, 541, 625, 847, 257,
        ],
        axisLabel: {
          formatter: function (value, i) {
            const arr = [`{a|${value}}`];
            return arr.join("");
          },
          rich: {
            a: {
              fontSize: 16,
              width: 48,
              height: 20,
              color: "#FFF",
              align: "center",
              // borderWidth: 1,
              // borderColor: 'red'
            },
            b: {
              fontSize: 16,
              width: 48,
              color: "#FFF",
              align: "center",
            },
          },
        },
      },
    ],
    // 滑动条
    dataZoom: [
      {
        // realtime : true,
        yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
        show: false, // 是否显示滑动条，不影响使用
        type: "slider", // 这个 dataZoom 组件是slider型
        startValue: 0, // 从头开始
        endValue: 4, // 一次性展示个数
      },
    ],
    series: [
      {
        name: "进站人数",
        type: "bar",
        stack: "地铁",
        barWidth: 20,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(175, 235, 255, 0.2)",
        },
        data: [
          260, 126, 1241, 808, 687, 987, 155, 77, 65, 158, 841, 615, 89, 236,
          651, 251, 71, 288, 541, 625, 87, 257,
        ],
      },
      {
        name: "出站人数",
        type: "bar",
        stack: "地铁",
        barWidth: 20,
        data: [
          2560, 1260, 1241, 808, 687, 987, 1575, 779, 654, 158, 841, 615, 789,
          1236, 3651, 251, 71, 2885, 541, 625, 847, 257,
        ],
      },
      {
        name: "入站前人数",
        type: "bar",
        stack: "地铁",
        barWidth: 20,
        data: [
          2560, 1260, 2410, 8080, 687, 9870, 5750, 779, 654, 158, 841, 615, 789,
          1236, 3651, 2510, 71, 2885, 5410, 6250, 847, 257,
        ],
      },
      {
        name: "出站后人数",
        type: "bar",
        stack: "地铁",
        barWidth: 20,
        data: [
          560, 260, 241, 808, 687, 987, 575, 779, 654, 158, 841, 615, 789, 236,
          651, 251, 71, 885, 541, 625, 847, 257,
        ],
      },
      {
        name: "",
        type: "bar",
        barWidth: 20,
        barGap: "-100%",
      },
    ],
  };

  setInterval(function () {
    // 通过动态改变数据实现不停循环播放
    let y1 = option.yAxis[0].data,
        y2 = option.yAxis[1].data,
        complate = option.series[0].data,
        underHandling = option.series[1].data,
        notStarted = option.series[2].data;
    y1.push(y1.shift());
    y2.push(y2.shift());
    complate.push(complate.shift());
    underHandling.push(underHandling.shift());
    notStarted.push(notStarted.shift());
    myCharts.setOption(option);

  }, 2000);
  myCharts.setOption(option);

  myCharts.setOption(option);

  window.addEventListener("resize", function () {
    myCharts.resize();
  });
})();

// 图四  拥堵指数环形图
(function () {
  // 1.实例化对象
  let myChart = echarts.init(document.querySelector(".line2 .chart"));
  let data={
    "title":["武汉市拥堵指数","一环"],
    "legend":["江夏区","洪山区","江汉区","江岸区","武昌区","青山区"],
    "data":[[8,30,2825],[9,90,3355],[5,150,2675],[5,210,2495],[6,270,2265],[7,330,1945]]
  }

  let option = {

    title: [
      // {
      //   text: data.title[0],
      //   left: 'center',
      //
      // },
      {
        text: data.title[1],
        left: 'center',
        top:'center',
        textStyle:{
          color:"#fff"
        }
      }
    ],
    color: ['#d74e67', '#0092ff', '#eba954', '#21b6b9','#60a900','#01949b','#f17677'],
    legend: {
      data: data.legend,
      left:'center',
      bottom: -6,
      colorIdx:'#5b9df2',
      // color:'#5b9df2'
      textStyle:{
        fontSize: 14,//字体大小
        color: '#ffffff'//字体颜色
      },

    },
    polar: {},
    angleAxis: {
      show:false,
      type: 'value',
      min:0,
      max:360
    },
    radiusAxis: {
      show:false,
      axisAngle: 0
    },
    series: []

  };
  for(let i=0;i<3;i++){
    option.series.push({
      type:'pie',
      radius:[27*i+"%",28*(i+1)+"%"],
      silent:true,
      labelLine:{
        normal:{
          show:false
        },
        emphasis:{
          show:false
        }
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#0e1f5f'
          }, {
            offset: 0.10,
            color: '#68d8fe'
          }, {
            offset: 0.45,
            color: '#0e1f5f'
          }, {
            offset: 0.55,
            color: '#0e1f5f'
          }, {
            offset: 0.90,
            color: '#68d8fe'
          },

            {
              offset: 1,
              color: '#0e1f5f'
            }
          ], false),
        }
      },
      data:[{value:100}]
    });
  }
  let size=[];
  for(let i=0;i<data.data.length;i++){
    size.push(data.data[i][2]);
  }
  for(let i=0;i<data.data.length;i++){
    option.series.push({
      name:data.legend[i],
      coordinateSystem: 'polar',
      angleAxisIndex: 0,
      radiusAxisIndex: 0,
      type: 'scatter',

      symbolSize: function(d){
        return d[2]*50/Math.max.apply(Math,size);
      },
      label:{
        normal:{
          show:true,

        }
      },
      data: [data.data[i]]
    })
  }
  setInterval(function () {
    for(var i =0;i<data.data.length;i++){
      data.data[i][1]++;
      if(data.data[i][1]>=360){
        data.data[i][1]=0;
      }
    }
    // console.log(data.data[0][1])
    myChart.setOption(option)
  },100);
  //3.配置实例对象
  // myCharts.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

//图五 地图模块
(function () {
  // 1.实例化对象
  let myChart = echarts.init(document.querySelector(".pie .chart"));
  myChart.showLoading()
  diskData = [
    {
      name: '区域',
      value: 1,
      children: [
        {
          name: '武昌区',
          value: 1
        },
        {
          name: '汉阳区',
          value: 1
        },
        {
          name: '江夏区',
          value: 1
        },
        {
          name: '青山区',
          value: 1
        },
        {
          name: '硚口区',
          value: 1
        }
      ]
    },
    {
      name: '区域',
      value: 1,
      children: [
        {
          name: '汉阳区',
          value: 1
        },
        {
          name: '硚口区',
          value: 1
        },
        {
          name: '东西湖区',
          value: 1
        },
        {
          name: '蔡甸区',
          value: 1
        },
        {
          name: '汉南区',
          value: 1
        },
        {
          name: '江汉区',
          value: 1
        }
      ]
    },
    {
      name: '区域',
      value: 1,
      children: [
        {
          name: '江岸区',
          value: 1
        },
        {
          name: '江夏区',
          value: 1
        },
        {
          name: '洪山区',
          value: 1
        },
        {
          name: '东西湖区',
          value: 1
        },
        {
          name: '武昌区',
          value: 1
        }
      ]
    }
  ]
  myChart.hideLoading()
  const formatUtil = echarts.format
  function getLevelOption () {
    return [
      {
        itemStyle: {
          borderWidth: 0,
          gapWidth: 20
        }
      },
      {
        itemStyle: {
          gapWidth: 1
        }
      },
      {
        colorSaturation: [0.35, 0.5],
        itemStyle: {
          gapWidth: 1,
          borderColorSaturation: 0.6
        }
      }
    ]
  }
  myChart.setOption(
      (option = {
        color: ['#6E35FF80', '#0522A780', '#7222A780'],
        tooltip: {
          formatter: function (info) {
            const value = info.value
            const treePathInfo = info.treePathInfo
            const treePath = []
            for (let i = 1; i < treePathInfo.length; i++) {
              treePath.push(treePathInfo[i].name)
            }
            return [
              '<div class="tooltip-title">' +
              formatUtil.encodeHTML(treePath.join('/')) +
              '</div>',
              '拥堵均值: ' + formatUtil.addCommas(value) + '畅通'
            ].join('')
          }
        },
        series: [
          {
            name: '拥堵均值',
            type: 'treemap',
            visibleMin: 300,
            top:5,
            label: {
              show: true,
              formatter: '{b}'
            },
            itemStyle: {
              borderWidth: 0,
              borderColor: 'transparent',
              gapWidth: 0
            },
            levels: getLevelOption(),
            data: diskData
          }
        ]
      })
  )

  // ---
  const sliceIndex = [
    [0, 4],
    [0, 4],
    [0, 4]
  ]
  setInterval(function () {
    const tags = JSON.parse(JSON.stringify(diskData))
    for (let i = 0; i < tags.length; i++) {
      let tag = tags[i].children
      const tagLength = tag.length

      const sliceItem = sliceIndex[i]

      tag = [...tag, ...tag]

      tags[i].children = tag.slice(sliceItem[0], sliceItem[1])
      sliceItem[0] += 1
      if (sliceItem[0] > tagLength) {
        sliceItem[0] = 0
        sliceItem[1] = 4
      } else {
        sliceItem[1] += 1
      }
      sliceIndex[i] = sliceItem
    }
    const option = myChart.getOption()
    option.series[0].data = tags
    myChart.setOption(option)

    function randomRange (min, max) {
      return Math.floor(Math.random() * (max - min)) + min
    }
  }, 1500)
//3.配置实例对象
  // myCharts.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
//图六 环线拥堵
(function (){
  // 1.实例化对象
  let myChart = echarts.init(document.querySelector(".pie2 .chart"));
  let laber = ["畅通", "良好", "拥堵", "  ", "拥堵", "良好", "畅通"];
  let option = {
    xAxis: [
      {
        zlevel: 20,
        type: "value",
        min: -50,
        max: 50,
        interval: 16.7,
        axisLabel: {
          margin: -65,
          color:'#fff',
          formatter: function (value, index) {
            return laber[index];
          },
          lineStyle: {
            color: "#278dfb",
          },
        },
        splitLine: {
          show: false,
        },
        splitArea: {
          show: false,
        },
      }
    ],
    yAxis: [
      {
        min: -50,
        max: 50,
        show: false,
        splitLine: {
          show: false,
        },
        splitArea: {
          show: false,
        },
      },
    ],
    legend: {
      show: false,
      data: [],

    },
    tooltip: {
      showContent: false,
    },
    sendDataSetting: {
      selectParams: false,
      selectCell: false,
    },
    visualMap: [
      {
        show: false,
        dimension: 2,
        min: 1,
        max: 3,
        precision: 0.01,
        // "inRange": {
        //     "symbolSize": [10, 50]
        // }
      },
    ],
    series: [
      {
        zlevel: 20,
        type: "scatter",
        symbol: "circle",
        symbolSize: 150,
        label: {
          normal: {
            show: true,
            formatter: function (param) {
              return param.data[2];
            },
          },
        },
        itemStyle: {
          normal: {
            color: "#5aa8ee",
          },
        },
        data: [[-1, 0, "武汉", "#278DFB", 19]],
      },
      {
        zlevel: 20,
        name: "下降",
        type: "scatter",
        symbol: "circle",
        symbolSize: function (param, a) {
          return param[4];
        },
        itemStyle: {
          normal: {
            color: function (param) {
              return param.data[3];
            },
          },
        },
        label: {
          color: "#000",
          normal: {
            textStyle: {
              fontSize: 10,
            },
            position: "bottom",
            show: true,
            formatter: function (param) {
              return param.data[2];
            },
          },
        },

        data: [
          [-40, -41, "汉南区", "#BF54Fb", 5],
          [-50, -36, "蔡甸区", "#BF54Fb", 5],
          [-31, 3, "硚口区", "#BF54Fb", 15],
          [17, -46, "江夏区", "#BF54Fb", 15],
          [-40, 15, "东西湖区", "#BF54Fb", 15],
          [1, 15, "江岸区", "#FCB03d", 15],
          [-35, -10, "汉阳区", "#BF54Fb", 5],
          [11, -7, "武昌区", "#BF54Fb", 10],
          [-2, -34, "江夏大道", "#BF54Fb", 10],
          [32, 34, "新洲区", "#BF54Fb", 10],
          [20, 9, "青山区", "#BF54Fb", 15],
        ],
        markLine: {},
      },
      {
        name: "上升",
        zlevel: 20,
        type: "scatter",
        symbol: "circle",
        itemStyle: {
          normal: {},
        },
        label: {
          color: "#000",
          normal: {
            textStyle: {
              fontSize: 10,
            },
            position: "bottom",
            show: true,
            formatter: function (param) {
              return param.data[2];
            },
          },
        },
        data: [
          [16, -58, "梁子湖", "#FCB03d", 15],
          [19, -23, "武昌大道", "#FCB03d", 10],
          [23, 33, "阳逻", "#FCB03d", 15],
          [-3, 44, "黄陂区", "#FCB03d", 10],
          [-12, 12, "江汉区", "#FCB03d", 15],
          [12, -23, "湖北大学", "#FCB03d", 10],
        ],
      },
      {
        type: "pie",
        radius: ["0", "45%"],
        center: ["50%", "50%"],
        zlevel: 2,
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: "center",
          },
          emphasis: {
            show: false,
            textStyle: {
              fontWeight: "bold",
            },
          },
        },
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0.05,
                  color: "rgba(130,198,255, 0.1)",
                },
                {
                  offset: 0.5,
                  color: "rgba(130,198,255, 0.2)",
                },
                {
                  offset: 0.95,
                  color: "rgba(130,198,255, 0.1)",
                },
              ],
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 3357,
          },
        ],
      },
      {
        type: "pie",
        radius: ["0%", "90%"],
        center: ["50%", "50%"],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: "center",
          },
          emphasis: {
            show: false,
            textStyle: {
              fontWeight: "bold",
            },
          },
        },
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0.1,
                  color: "rgba(130,198,255, 0)",
                },
                {
                  offset: 0.5,
                  color: "rgba(130,198,255, 0.2)",
                },
                {
                  offset: 0.9,
                  color: "rgba(130,198,255, 0)",
                },
              ],
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 3235,
          },
        ],
      },
      {
        type: "pie",
        radius: ["0%", "135%"],
        center: ["51%", "50%"],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: "center",
          },
          emphasis: {
            show: false,
            textStyle: {
              fontWeight: "bold",
            },
          },
        },
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0.2,
                  color: "rgba(130,198,255, 0.0)",
                },
                {
                  offset: 0.5,
                  color: "rgba(130,198,255, 0.2)",
                },
                {
                  offset: 0.88,
                  color: "rgba(130,198,255, 0.0)",
                },
              ],
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 3235,
          },
        ],
      },
    ],
  };
//3.配置实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();



// 三个点击按钮
(function () {
  let but1 = document.querySelector(".buttons .but1");
  let but2 = document.querySelector(".buttons .but2");

  but1.addEventListener("click", function () {
    window.location.href = "./index.html";
  });
  but2.addEventListener("click", function () {
    //跳转到智慧出行
    window.location.href = "http://www.xiaoganyun.cn";
  });

})();

